<template>
    <a-row :gutter="10">
        <a-col :md="8" :sm="24">
            <a-card :bordered="false">
                <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
                    <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称" />
                        <a-tree 
                             showLine
                             :selectedKeys="selectedKeys"
                             :checkStrictly="true"
                             @select="onSelect"
                             :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                             :treeData="departTree"
                             :autoExpandParent="autoExpandParent"
                             :expandedKeys="iExpandedKeys"
                             @expand="onExpand" />
                </div>
            </a-card>
        </a-col>
        <!-- 右侧相关部门的详细信息 -->
        <a-col :md="16" :sm="24">
            <a-card :bordered="false">
                <!-- tab页 -->
                <a-tabs defaultActiveKey="2">
                    <a-tab-pane tab="基本信息" key="1" forceRender>
                        <Dept-Base-Info ref="deptBaseInfo"></Dept-Base-Info>
                    </a-tab-pane>
                    <a-tab-pane tab="用户信息" key="2" forceRender>
                        <dept-user-info ref="deptUserInfo"></dept-user-info>
                    </a-tab-pane>
                    <a-tab-pane tab="部门角色" key="3" forceRender>
                        <dept-role-info ref="deptRoleInfo"></dept-role-info>
                    </a-tab-pane>
                </a-tabs>
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
import { queryMyDepartTreeList} from '@/mock' 
import DeptBaseInfo from './components/DeptBaseInfo.vue'
import DeptUserInfo from './components/DeptUserInfo.vue'
import DeptRoleInfo from './components/DeptRoleInfo.vue'

export default {
    name: 'DepartUserList',
    components: {
        DeptBaseInfo,
        DeptUserInfo,
        DeptRoleInfo
    },
    data() {
        return {
            selectedKeys: [],
             autoExpandParent: true,
             iExpandedKeys: [],
             treeData: [],
             departTree: [],
        }
    },
    created() {
        this.loadTree();
    },
    methods: {
        onSearch() {

        },
        onSelect(selectedKeys, e) {
             if (this.selectedKeys[0] !== selectedKeys[0]) {
                     this.selectedKeys = [selectedKeys[0]];
                }
             let record = e.node.dataRef;
             this.checkedKeys.push(record.id);
             this.$refs.deptBaseInfo.open();
            //  this.$refs.deptUserInfo.open();
        },
        onExpand() {},
        loadTree() {
             var that = this
             that.treeData = []
             that.departTree = []
            queryMyDepartTreeList().then(res=>{
                 if (res.success && res.result ) {
                      for (let i = 0; i < res.result.length; i++) {
                            let temp = res.result[i]
                            that.treeData.push(temp)
                            that.departTree.push(temp)
                            that.setThisExpandedKeys(temp)
                            console.log(temp);
                        }
                        this.loading = false
                 }


                
            })
        },
        setThisExpandedKeys(node) {
             //只展开一级目录
            if (node.children && node.children.length > 0) {
            this.iExpandedKeys.push(node.key)
            }
        }
    }
}
</script>